<?php
if (!defined('ABSPATH')) { exit; }

// 获取安全模块实例检查许可证状态
$security = wp_spider_premium_security();
$is_premium = $security->is_premium_activated();
?>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蜘蛛分析 - SPA仪表板</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background: #f1f1f1;
            color: #333;
            transition: all 0.3s ease;
        }
        
        /* 主题变量 */
        :root {
            --spa-sidebar-bg: linear-gradient(180deg, #2c3e50 0%, #34495e 100%);
            --spa-sidebar-header-bg: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
            --spa-content-bg: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            --spa-container-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --spa-text-color: #333;
            --spa-sidebar-text: rgba(255,255,255,0.8);
            --spa-sidebar-active-bg: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
            --spa-sidebar-hover-bg: linear-gradient(135deg, rgba(52, 152, 219, 0.2) 0%, rgba(41, 128, 185, 0.2) 100%);
            --spa-shadow: 0 0 30px rgba(0,0,0,0.3);
        }
        
        /* 暗黑主题 */
        body.dark-theme {
            --spa-sidebar-bg: linear-gradient(180deg, #1a1a1a 0%, #2d2d30 100%);
            --spa-sidebar-header-bg: linear-gradient(135deg, #0073aa 0%, #005a87 100%);
            --spa-content-bg: linear-gradient(135deg, #1e1e1e 0%, #252526 100%);
            --spa-container-bg: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
            --spa-text-color: #cccccc;
            --spa-sidebar-text: rgba(255,255,255,0.9);
            --spa-sidebar-active-bg: linear-gradient(135deg, #0073aa 0%, #005a87 100%);
            --spa-sidebar-hover-bg: linear-gradient(135deg, rgba(0, 115, 170, 0.3) 0%, rgba(0, 90, 135, 0.3) 100%);
            --spa-shadow: 0 0 30px rgba(0,0,0,0.5);
        }
        
        /* 彩色主题 */
        body.colorful-theme {
            --spa-sidebar-bg: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
            --spa-sidebar-header-bg: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
            --spa-content-bg: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 100%);
            --spa-container-bg: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
            --spa-text-color: #2d3436;
            --spa-sidebar-text: rgba(255,255,255,0.9);
            --spa-sidebar-active-bg: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
            --spa-sidebar-hover-bg: linear-gradient(135deg, rgba(255, 107, 107, 0.3) 0%, rgba(238, 90, 36, 0.3) 100%);
            --spa-shadow: 0 0 30px rgba(116, 185, 255, 0.3);
        }
        
        /* 赛博朋克主题 */
        body.cyberpunk-theme {
            --spa-sidebar-bg: linear-gradient(180deg, #0a0a0a 0%, #1a0033 100%);
            --spa-sidebar-header-bg: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%);
            --spa-content-bg: linear-gradient(135deg, #0a0a0a 0%, #1a0033 100%);
            --spa-container-bg: linear-gradient(135deg, #000000 0%, #1a0033 100%);
            --spa-text-color: #00ff88;
            --spa-sidebar-text: rgba(0, 255, 136, 0.8);
            --spa-sidebar-active-bg: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%);
            --spa-sidebar-hover-bg: linear-gradient(135deg, rgba(0, 255, 136, 0.2) 0%, rgba(0, 204, 106, 0.2) 100%);
            --spa-shadow: 0 0 30px rgba(0, 255, 136, 0.3);
        }
        
        .spa-container {
            display: flex;
            min-height: 100vh;
            background: var(--spa-container-bg);
            transition: all 0.3s ease;
        }
        
        .spider-nav-sidebar {
            width: 200px;
            min-width: 150px;
            max-width: 220px;
            background: var(--spa-sidebar-bg);
            color: var(--spa-sidebar-text);
            padding: 0;
            box-shadow: var(--spa-shadow);
            position: sticky;
            top: 0;
            height: 100vh;
            overflow-y: auto;
            z-index: 1000;
            border-radius: 0 20px 20px 0;
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
            flex-shrink: 0;
        }
        
        /* 自定义滚动条 */
        .spider-nav-sidebar::-webkit-scrollbar {
            width: 6px;
        }
        
        .spider-nav-sidebar::-webkit-scrollbar-track {
            background: rgba(255,255,255,0.1);
            border-radius: 3px;
        }
        
        .spider-nav-sidebar::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.3);
            border-radius: 3px;
        }
        
        .spider-nav-sidebar::-webkit-scrollbar-thumb:hover {
            background: rgba(255,255,255,0.5);
        }
        
        .spider-nav-header {
            padding: 30px 25px;
            background: var(--spa-sidebar-header-bg);
            border-radius: 0 20px 0 0;
            margin-bottom: 0;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .spider-nav-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="white" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
            opacity: 0.3;
        }
        
        .spider-nav-title {
            font-size: 20px;
            font-weight: 700;
            margin: 0;
            color: #fff;
            display: flex;
            align-items: center;
            gap: 12px;
            position: relative;
            z-index: 1;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }
        
        .spider-nav-title::before {
            content: "🕷️";
            font-size: 24px;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }
        
        .spider-nav-menu {
            list-style: none;
            margin: 0;
            padding: 20px 0;
        }
        
        .spider-nav-item {
            margin: 0 0 8px 0;
            padding: 0 15px;
        }
        
        .spider-nav-link {
            display: flex;
            align-items: center;
            padding: 15px 20px;
            color: var(--spa-sidebar-text);
            text-decoration: none;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border-radius: 12px;
            position: relative;
            cursor: pointer;
            font-weight: 500;
            font-size: 14px;
            overflow: hidden;
        }
        
        .spider-nav-link::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
            transition: left 0.5s;
        }
        
        .spider-nav-link:hover::before {
            left: 100%;
        }
        
        .spider-nav-link:hover {
            background: var(--spa-sidebar-hover-bg);
            color: #fff;
            text-decoration: none;
            transform: translateX(5px);
            box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
        }
        
        .spider-nav-link.active {
            background: var(--spa-sidebar-active-bg);
            color: #fff;
            box-shadow: 0 4px 20px rgba(52, 152, 219, 0.4);
            transform: translateX(5px);
        }
        
        .spider-nav-link.active::after {
            content: "→";
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            color: #fff;
            font-weight: bold;
            font-size: 16px;
            animation: slideIn 0.3s ease;
        }
        
        @keyframes slideIn {
            from { opacity: 0; transform: translateY(-50%) translateX(-10px); }
            to { opacity: 1; transform: translateY(-50%) translateX(0); }
        }
        
        .spider-content-area {
            flex: 1;
            min-width: 0;
            padding: 30px;
            background: var(--spa-content-bg);
            min-height: 100vh;
            border-radius: 20px 0 0 20px;
            box-shadow: -5px 0 30px rgba(0,0,0,0.1);
            color: var(--spa-text-color);
            transition: all 0.3s ease;
            overflow-x: auto;
            margin-left: 0;
        }
        
        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid #0073aa;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 20px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .spa-loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 400px;
            text-align: center;
        }
        
        .spa-error {
            text-align: center;
            padding: 40px 20px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .spa-error h3 {
            color: #d63638;
            margin-bottom: 10px;
        }
        
        .spa-error p {
            color: #666;
            margin-bottom: 20px;
        }
        
        .nav-icon {
            display: inline-block;
            width: 24px;
            height: 24px;
            text-align: center;
            margin-right: 12px;
            font-size: 18px;
            background: rgba(255,255,255,0.1);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }
        
        .spider-nav-link:hover .nav-icon {
            background: rgba(255,255,255,0.2);
            transform: scale(1.1) rotate(5deg);
        }
        
        .spider-nav-link.active .nav-icon {
            background: rgba(255,255,255,0.3);
            transform: scale(1.1);
        }
        
        /* 添加浮动效果 */
        .spider-nav-sidebar {
            animation: slideInLeft 0.6s ease-out;
        }
        
        @keyframes slideInLeft {
            from { transform: translateX(-100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        
        /* 添加内容区域动画 */
        .spider-content-area {
            animation: slideInRight 0.6s ease-out;
        }
        
        @keyframes slideInRight {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        
        /* 添加底部装饰 */
        .spider-nav-sidebar::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #3498db, #2980b9, #3498db);
            background-size: 200% 100%;
            animation: shimmer 3s infinite;
        }
        
        @keyframes shimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }
        
        /* 大屏幕优化 */
        @media (min-width: 1920px) {
            .spider-nav-sidebar {
                width: 320px;
            }
            
            .spider-nav-link {
                padding: 18px 25px;
                font-size: 15px;
            }
            
            .spider-nav-title {
                font-size: 22px;
            }
        }
        
         /* 中等屏幕 */
         @media (max-width: 1200px) {
             .spider-nav-sidebar {
                 width: 250px;
             }
             
             .spider-nav-link {
                 padding: 12px 18px;
                 font-size: 13px;
             }
             
             .spider-content-area {
                 padding: 25px;
             }
         }
        
        /* 小屏幕 */
        @media (max-width: 992px) {
            .spider-nav-sidebar {
                width: 220px;
            }
            
            .spider-nav-link {
                padding: 10px 15px;
                font-size: 12px;
            }
            
            .spider-nav-title {
                font-size: 18px;
            }
            
            .spider-content-area {
                padding: 20px;
            }
        }
        
        /* 平板和手机 */
        @media (max-width: 768px) {
            .spa-container {
                flex-direction: column;
                background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
            }
            
            .spider-nav-sidebar {
                width: 100%;
                height: auto;
                position: relative;
                padding: 0;
                border-radius: 0 0 20px 20px;
                margin-bottom: 20px;
                min-width: auto;
                max-width: none;
            }
            
            .spider-nav-header {
                border-radius: 0 0 20px 20px;
            }
            
            .spider-content-area {
                margin-left: 0;
                padding: 20px;
                border-radius: 20px;
                margin: 0 10px 20px;
            }
            
            .spider-nav-menu {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
                padding: 20px;
            }
            
            .spider-nav-item {
                flex: 1;
                min-width: calc(50% - 4px);
                margin: 0;
            }
            
            .spider-nav-link {
                padding: 12px 16px;
                font-size: 13px;
                text-align: center;
                border-radius: 10px;
                flex-direction: column;
                gap: 4px;
            }
            
            .spider-nav-link:hover {
                transform: translateY(-2px);
            }
            
            .spider-nav-link.active {
                transform: translateY(-2px);
            }
            
            .spider-nav-link.active::after {
                display: none;
            }
            
            .nav-icon {
                margin: 0 0 4px 0;
                font-size: 16px;
                width: 20px;
                height: 20px;
            }
        }
        
        /* 超小屏幕 */
        @media (max-width: 480px) {
            .spider-nav-menu {
                padding: 15px;
            }
            
            .spider-nav-item {
                min-width: calc(100% - 8px);
            }
            
            .spider-nav-link {
                padding: 15px;
                font-size: 14px;
            }
            
            .spider-content-area {
                padding: 15px;
                margin: 0 5px 15px;
            }
        }
        
         /* 主题切换器样式 */
         .theme-switcher {
             position: relative;
             overflow: hidden;
         }
         
         .theme-switcher::before {
             content: '';
             position: absolute;
             top: 0;
             left: -100%;
             width: 100%;
             height: 100%;
             background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
             transition: left 0.5s;
         }
         
         .theme-switcher:hover::before {
             left: 100%;
         }
         
         .theme-btn {
             position: relative;
             overflow: hidden;
         }
         
         .theme-btn::before {
             content: '';
             position: absolute;
             top: 50%;
             left: 50%;
             width: 0;
             height: 0;
             background: rgba(255,255,255,0.3);
             border-radius: 50%;
             transform: translate(-50%, -50%);
             transition: all 0.3s ease;
         }
         
         .theme-btn:hover::before {
             width: 100%;
             height: 100%;
         }
         
         .theme-btn.active {
             border-color: rgba(255,255,255,0.8) !important;
             box-shadow: 0 0 15px rgba(255,255,255,0.5) !important;
         }
         
         /* 添加深色模式支持 */
         @media (prefers-color-scheme: dark) {
             .spider-content-area {
                 background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
                 color: #fff;
             }
         }
         
         /* 主题切换动画 */
         .theme-transition {
             transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
         }
         
         /* 侧边栏折叠样式 */
         .spider-nav-sidebar.collapsed {
             width: 60px;
             min-width: 60px;
             max-width: 60px;
         }
         
         .spider-nav-sidebar.collapsed .spider-nav-header {
             padding: 20px 15px;
         }
         
         .spider-nav-sidebar.collapsed .spider-nav-title {
             font-size: 0;
             opacity: 0;
         }
         
         .spider-nav-sidebar.collapsed .spider-nav-title::before {
             font-size: 20px;
             margin: 0;
         }
         
         .spider-nav-sidebar.collapsed .sidebar-controls {
             padding: 10px 15px;
             flex-direction: column;
             gap: 10px;
         }
         
         .spider-nav-sidebar.collapsed .theme-switcher {
             flex-direction: column;
             gap: 4px;
         }
         
         .spider-nav-sidebar.collapsed .spider-nav-link {
             padding: 15px 10px;
             justify-content: center;
         }
         
         .spider-nav-sidebar.collapsed .spider-nav-link span:not(.nav-icon) {
             display: none;
         }
         
         .spider-nav-sidebar.collapsed .nav-icon {
             margin-right: 0;
         }
         
         .spider-nav-sidebar.collapsed .spider-nav-link.active::after {
             display: none;
         }
         
         /* 侧边栏折叠时调整内容区域 */
         .spider-nav-sidebar.collapsed + .spider-content-area {
             margin-left: 0;
             border-radius: 20px;
         }
         
         /* 响应式主题切换器 */
         @media (max-width: 768px) {
             .theme-switcher {
                 padding: 10px 15px !important;
             }
             
             .theme-btn {
                 width: 16px !important;
                 height: 16px !important;
             }
             
             .sidebar-controls {
                 flex-direction: row !important;
             }
         }
    </style>
</head>
<body>
    <div class="spa-container">
        <!-- 侧边导航栏 -->
        <nav class="spider-nav-sidebar">
            <div class="spider-nav-header">
                <h1 class="spider-nav-title">蜘蛛分析</h1>
            </div>
            
             <!-- 侧边栏控制 -->
             <div class="sidebar-controls" style="padding: 10px 20px; border-bottom: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; align-items: center;">
                 <button id="toggle-sidebar" style="background: rgba(255,255,255,0.1); border: none; color: white; padding: 8px 12px; border-radius: 6px; cursor: pointer; transition: all 0.3s ease; font-size: 12px;" title="折叠侧边栏">
                     <span id="toggle-icon">◀</span>
                 </button>
                 <div class="theme-switcher" style="display: flex; gap: 6px;">
                     <button class="theme-btn active" data-theme="default" style="width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.3); background: linear-gradient(135deg, #3498db, #2980b9); cursor: pointer; transition: all 0.3s ease;" title="默认主题"></button>
                     <button class="theme-btn" data-theme="dark" style="width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.3); background: linear-gradient(135deg, #1a1a1a, #2d2d30); cursor: pointer; transition: all 0.3s ease;" title="暗黑主题"></button>
                     <button class="theme-btn" data-theme="colorful" style="width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.3); background: linear-gradient(135deg, #ff6b6b, #ee5a24); cursor: pointer; transition: all 0.3s ease;" title="彩色主题"></button>
                     <button class="theme-btn" data-theme="cyberpunk" style="width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.3); background: linear-gradient(135deg, #00ff88, #00cc6a); cursor: pointer; transition: all 0.3s ease;" title="赛博朋克主题"></button>
                 </div>
             </div>
             
             <ul class="spider-nav-menu">
                 <li class="spider-nav-item">
                     <a href="#overview" class="spider-nav-link active" data-route="overview">
                         <span class="nav-icon">📊</span>
                         蜘蛛概况
                     </a>
                 </li>
                <li class="spider-nav-item">
                    <a href="#list" class="spider-nav-link" data-route="list">
                        <span class="nav-icon">📋</span>
                        蜘蛛列表
                    </a>
                </li>
                <li class="spider-nav-item">
                    <a href="#paths" class="spider-nav-link" data-route="paths">
                        <span class="nav-icon">🛤️</span>
                        访问路径
                    </a>
                </li>
                <li class="spider-nav-item">
                    <a href="#articles" class="spider-nav-link" data-route="articles">
                        <span class="nav-icon">📄</span>
                        文章爬取
                    </a>
                </li>
                <li class="spider-nav-item">
                    <a href="#indexing" class="spider-nav-link" data-route="indexing">
                        <span class="nav-icon">🔍</span>
                        收录分析
                    </a>
                </li>
                <li class="spider-nav-item">
                    <a href="#push" class="spider-nav-link" data-route="push">
                        <span class="nav-icon">🚀</span>
                        搜索引擎推送
                    </a>
                </li>
                <li class="spider-nav-item">
                    <a href="#settings" class="spider-nav-link" data-route="settings">
                        <span class="nav-icon">⚙️</span>
                        设置
                    </a>
                </li>
                <li class="spider-nav-item">
                    <a href="#plugin-settings" class="spider-nav-link" data-route="plugin-settings">
                        <span class="nav-icon">🔧</span>
                        插件设置
                    </a>
                </li>
            </ul>
        </nav>
        
        <!-- 主内容区域 -->
        <main class="spider-content-area" id="spider-content-area">
            <div class="spa-loading">
                <div class="loading-spinner"></div>
                <p>正在加载蜘蛛分析...</p>
            </div>
        </main>
    </div>

    <!-- 加载jQuery和WordPress脚本 -->
    <script src="<?php echo includes_url('js/jquery/jquery.min.js'); ?>"></script>
    <script>
        // 设置WordPress环境变量
        window.ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
        window.wpSpiderMonitor = {
            nonce: '<?php echo wp_create_nonce('wp_spider_monitor_nonce'); ?>',
            subscription: {
                is_premium: <?php echo $is_premium ? 'true' : 'false'; ?>
            }
        };
    </script>
    
    <!-- 加载SPA脚本 -->
    <script src="<?php echo WP_SPIDER_MONITOR_PLUGIN_URL; ?>assets/js/simple-spa.js"></script>
    
     <script>
         // 页面加载完成后的初始化
         jQuery(document).ready(function($) {
             console.log('SPA仪表板初始化开始');
             console.log('ajaxurl:', window.ajaxurl);
             console.log('wpSpiderMonitor:', window.wpSpiderMonitor);
             
             // 确保SPA已加载
             if (typeof window.SpiderSimpleSPA !== 'undefined') {
                 console.log('SPA已加载，开始初始化');
             } else {
                 console.error('SPA未加载');
             }
             
             // 主题切换功能
             initThemeSwitcher();
             
             // 侧边栏折叠功能
             initSidebarToggle();
         });
         
         // 初始化主题切换器
         function initThemeSwitcher() {
             // 从本地存储加载保存的主题
             const savedTheme = localStorage.getItem('spider-spa-theme') || 'default';
             applyTheme(savedTheme);
             
             // 绑定主题切换事件
             document.querySelectorAll('.theme-btn').forEach(btn => {
                 btn.addEventListener('click', function() {
                     const theme = this.dataset.theme;
                     applyTheme(theme);
                     
                     // 更新按钮状态
                     document.querySelectorAll('.theme-btn').forEach(b => b.classList.remove('active'));
                     this.classList.add('active');
                     
                     // 保存到本地存储
                     localStorage.setItem('spider-spa-theme', theme);
                 });
                 
                 // 悬停效果
                 btn.addEventListener('mouseenter', function() {
                     this.style.transform = 'scale(1.2)';
                     this.style.boxShadow = '0 0 10px rgba(255,255,255,0.5)';
                 });
                 
                 btn.addEventListener('mouseleave', function() {
                     this.style.transform = 'scale(1)';
                     this.style.boxShadow = 'none';
                 });
             });
         }
         
         // 应用主题
         function applyTheme(theme) {
             const body = document.body;
             
             // 移除所有主题类
             body.classList.remove('dark-theme', 'colorful-theme', 'cyberpunk-theme');
             
             // 应用新主题
             if (theme !== 'default') {
                 body.classList.add(theme + '-theme');
             }
             
             // 添加主题切换动画
             body.style.transition = 'all 0.5s ease';
             setTimeout(() => {
                 body.style.transition = '';
             }, 500);
             
             console.log('主题已切换到:', theme);
         }
         
         // 监听系统主题变化
         if (window.matchMedia) {
             const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
             mediaQuery.addListener(function(e) {
                 if (e.matches && !localStorage.getItem('spider-spa-theme')) {
                     applyTheme('dark');
                 }
             });
         }
         
         // 初始化侧边栏折叠功能
         function initSidebarToggle() {
             const sidebar = document.querySelector('.spider-nav-sidebar');
             const toggleBtn = document.getElementById('toggle-sidebar');
             const toggleIcon = document.getElementById('toggle-icon');
             
             // 从本地存储加载侧边栏状态
             const isCollapsed = localStorage.getItem('spider-sidebar-collapsed') === 'true';
             if (isCollapsed) {
                 sidebar.classList.add('collapsed');
                 toggleIcon.textContent = '▶';
             }
             
             // 绑定折叠事件
             toggleBtn.addEventListener('click', function() {
                 sidebar.classList.toggle('collapsed');
                 
                 if (sidebar.classList.contains('collapsed')) {
                     toggleIcon.textContent = '▶';
                     localStorage.setItem('spider-sidebar-collapsed', 'true');
                 } else {
                     toggleIcon.textContent = '◀';
                     localStorage.setItem('spider-sidebar-collapsed', 'false');
                 }
             });
             
             // 悬停效果
             toggleBtn.addEventListener('mouseenter', function() {
                 this.style.background = 'rgba(255,255,255,0.2)';
                 this.style.transform = 'scale(1.05)';
             });
             
             toggleBtn.addEventListener('mouseleave', function() {
                 this.style.background = 'rgba(255,255,255,0.1)';
                 this.style.transform = 'scale(1)';
             });
             
             // 自动折叠功能（当屏幕宽度小于1000px时）
             function checkScreenSize() {
                 if (window.innerWidth < 1000 && !sidebar.classList.contains('collapsed')) {
                     sidebar.classList.add('collapsed');
                     toggleIcon.textContent = '▶';
                     localStorage.setItem('spider-sidebar-collapsed', 'true');
                 }
             }
             
             // 监听窗口大小变化
             window.addEventListener('resize', checkScreenSize);
             checkScreenSize(); // 初始检查
             
             // 监听侧边栏折叠状态变化
             const observer = new MutationObserver(function(mutations) {
                 mutations.forEach(function(mutation) {
                     if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                         adjustContentArea();
                     }
                 });
             });
             
             observer.observe(sidebar, {
                 attributes: true,
                 attributeFilter: ['class']
             });
             
             // 初始调整
             adjustContentArea();
         }
         
         // 调整内容区域布局
         function adjustContentArea() {
             const sidebar = document.querySelector('.spider-nav-sidebar');
             const contentArea = document.querySelector('.spider-content-area');
             
             if (!sidebar || !contentArea) return;
             
             if (sidebar.classList.contains('collapsed')) {
                 contentArea.style.marginLeft = '0';
                 contentArea.style.borderRadius = '20px';
             } else {
                 contentArea.style.marginLeft = '0';
                 contentArea.style.borderRadius = '20px 0 0 20px';
             }
         }
     </script>
</body>
</html>
